

<template>
    <div>
        <el-container class="home-container">
            <el-aside>
                <el-menu router>
                    <el-menu-item index="/manage/user">
                        <el-icon>
                            <user/>
                        </el-icon>
                        <span>用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="/manage/goods">
                        <el-icon>
                            <present/>
                        </el-icon>
                        <span>商品管理</span>
                    </el-menu-item>
                    <el-menu-item>
                        <el-icon style="font-size: 10px">
                            <box/>
                        </el-icon>
                        <span>订单管理</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header height="60px" style="background: #F4F5F9;">
                    <div style="float: right;margin-top: 20px;">
                        <el-icon style="font-size: 20px;">
                            <user/>
                        </el-icon>
                        <span>管理员:&nbsp;&nbsp;&nbsp;&nbsp;{{adm}}</span>
                    </div>
                </el-header>
                <el-main>
                    <keep-alive include="admin">
                        <router-view></router-view>
                    </keep-alive>

                </el-main>
            </el-container>

        </el-container>
    </div>
</template>
<script setup>
import { ref} from 'vue'

const adm = ref(
sessionStorage.getItem('adm')
)

</script>
<style scoped>
.home-container {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
//background: #ddd;
}

.el-aside {
    background-color: #122842;
    width: 200px;

}

.el-aside .el-menu {
    background-color: #122842;
}

.el-menu :hover {
    background: #6b778c;
}

.el-menu-item {
    color: white;
}
</style>